<template>
  <div id="test">
    <!-- 工具栏 -->
    <Toolbar v-on:Color="thisColor" v-on:toolbar="thisToolbar"></Toolbar>
    <!-- 主要绘图 -->
    <canvas class="img" id="img"></canvas>
    <canvas class="data" id="data"></canvas>
    <!-- <img src="../assets/img/视频白板.jpg" alt=""> -->
    <canvas
      class="draw"
      id="draw"
      @mousedown="down($event)"
      @mousemove="move($event)"
      @mouseup="up($event)"
      ref="canvasBox"
    ></canvas>
    <!-- 文字输入框 -->
    <input
      type="text"
      class="ipt"
      v-model="fontText"
      ref="input"
      :style="{left:iptLeft+'px',top:iptTop+'px'}"
      v-show="iptShow"
      @blur="drawFont()"
    />
    <!-- 底部文件 -->
    <File v-on:Url="imgUrl" :files="files" :host="host" :gxFile="gxFile"></File>

    <!-- 消息聊天 -->
    <message :userList="userList" :userId="userId" :userName="userName" :hostFlag="hostFlag" :videoRoomId="videoRoomId"></message>
    <!-- <iframe
      :id="show_iframe"
      frameborder="0"
      name="showHere"
      scrolling="auto"
      src="../../static/Model/index.html"
    ></iframe>-->
  </div>
</template>
<script>
import { getUserInfo } from "../service/api";
import drawDesign from "../service/draw.js";
import Toolbar from '@/page/component/Toolbar';
import File from '@/page/component/File';
import message from '@/page/component/message';
export default {
  components: {
    Toolbar, // 工具模块
    File, // 文件模块
    message // 聊天模块
  },
  data() {
    return {
      webSocket: null,
      allData: {}, // 存放所有操作数据，包括绘画数据
      fileId: null, // 当前的文件id
      imgIndex: null, // 当前的图片索引
      img: null, // 第一层背景图canvas   dom元素
      data: null, // 第二层数据canvas   dom元素
      draw: null, // 第三层绘板canvas   dom元素
      color: '#FF0000', // 当前的颜色
      tool: '涂鸦', // 当前的工具
      img: null, // 当前的背景图
      src: require('../assets/img/视频白板.jpg'), // 当前图片的路径
      imgWidth: null, // 当前背景图的原始宽度
      imgHeight: null, // 当前背景图的原始高度
      ctxImg: null,  // 背景图上下文
      ctxData: null, // 绘画数据上下文
      ctxDraw: null, // 绘板上下文
      canvasWidth: null, // 画板的宽度
      canvasHeight: null, // 画板的高度
      downx: null, // 鼠标点下的X坐标
      downy: null, // 鼠标点下的Y坐标
      flag: false, // 判断点下绘图
      x: null, // 当前 x 坐标
      y: null, // 当前 y 坐标
      x1: null, // 当前 x 坐标的复制
      y1: null, // 当前 y 坐标的复制
      endx: null, // 结束 x 坐标
      endy: null, // 结束 y 坐标
      endx1: null, // 结束 x 坐标的复制
      endy1: null, // 结束 y 坐标的复制
      movex: null,
      movey: null, // 实时移动的坐标
      LEFT: false, // 判断点下的是左键还是右键
      lineWidth: 2, // 当前绘画线条宽度
      arrX: null,
      arrY: null, // 临时存放点线的数组
      fontText: null, // 文字数据
      iptShow: false, // 文字输入框是否显示
      iptLeft: null,
      iptTop: null, // 文字输入框位置 
      fontx: null,
      fonty: null,
      Roller: false, // 判断能否缩放
      Rollerx: null,
      Rollery: null, // 缩放时鼠标所处的位置
      zoom: 1, // 当前缩放的倍数

      userList: [],
      userId: null, // 当前房间用户Id
      userName: null, // 当前房间用户昵称
      host: 1,// 是否为主持人
      roomId: null,

      hostFlag: false,
      files: [],
      // files: [{ name: '三维模型' }],
      gxFile: null,
      show_iframe: 'iframe_hide',
      videoRoomId: null
    };
  },
  //  var index = Math.floor(Math.random()*36);
  created() {
    console.log(this.$route.query.roomId.substring(1, 12));

    this.roomId = this.$route.query.roomId.substring(1, 12);

  },
  destroyed() {
    console.log('....',this.webSocket)
    this.webSocket.close() // 离开路由之后断开websocket连接
  },
  mounted() {
    let ra = Math.floor(Math.random() * 100000);
    this.userId = window.localStorage.getItem("account");
    this.userName = window.localStorage.getItem("username");
    // this.initWebSocket(); // 初始化WebSocket
    this.initCanvas(); // 获取canvas的 dom 和 上下文 并初始化 宽高
    this.initWebSocket(); // 初始化WebSocket
    // this.initLoading();
    // document.getElementById("test").append(this.img);
    window.onresize = () => { // 画布根据屏幕缩放初始化
      this.initCanvas();
      this.initLoading1();
      drawDesign.drawAllData(this.ctxData, this.x, this.y, this.endx, this.endy, this.zoom, this.allData[this.fileId][this.imgIndex]); // 绘画所有数据
    }
    let account = this.$route.query.roomId;
    console.log(account)
    this.getVideoRoom(account)
  },
  methods: {
    getVideoRoom(account) {
      let data = {
        query: {
          account: "=" + account
        }
      };
      console.log(data)
      getUserInfo(data).then(res => {
        console.log(res)

        this.videoRoomId = res.info.rows[0].videoRoomId
      });
    },
    imgUrl(val) {
      console.log('当前选择的url：', val)
      if (val == 'three') {
        this.show_iframe = 'iframe_show';
      } else {
        this.show_iframe = false;
        this.src = val.imgsrc;
        if (val.fileId != null) {
          this.fileId = val.fileId;
        }
        this.imgIndex = val.imgIndex;
        if (!this.allData[this.fileId]) {
          this.allData[this.fileId] = {};
        }
        if (!this.allData[this.fileId][this.imgIndex]) {
          this.allData[this.fileId][this.imgIndex] = [];
        }
        this.initLoading();
      }
      console.log(this.allData)
    },
    initWebSocket() { //初始化weosocket
      // 钱
      // const wsurl = "ws://192.168.3.244:9002";
      // 闵
      // const wsurl = "ws://192.168.1.232:9002";
      const wsurl = "wss://www.xnsjy.cn:446/wss";

      console.log(wsurl)
      this.webSocket = new WebSocket(wsurl);
      if (this.webSocket) {
        this.webSocket.onmessage = this.websocketonmessage;
        this.webSocket.onopen = this.websocketonopen;
        this.webSocket.onerror = this.websocketonerror;
        this.webSocket.onclose = this.websocketclose;
      }
    },
    websocketonopen(e) { //连接建立之后执行send方法发送数据
      console.log(this.roomId, '................................', e)
      let login_obj = {
        type: 'login',
        data: {
          roomId: this.roomId,
          userId: this.userId,
          userName: this.userName
        }
      }
      console.log(login_obj)
      this.websocketsend(login_obj);
    },
    websocketonerror() {//连接建立失败重连
      // this.initWebSocket();
    },
    websocketonmessage(e) { //数据接收
      let data = JSON.parse(e.data);
      console.log(data, 'message');
      if (data.type == 'login') { // 登录成功

        this.userList = data.info; // 更新成员列表
        for (let i = 0; i < data.info.length; i++) { // 循环成员列表获取到自己的身份
          if (data.info[i].userId == this.userId) {
            this.host = data.info[i].host
          }
        }
        console.log('initHost', this.host, this.allData)
        if (this.host == 1) { // 如果自己是主持人，发送当前的房间数据给新成员
          console.log("jinru")
          let sendData = {
            type: 'sendData',
            data: this.allData,
            files: this.files
          }
          this.websocketsend(sendData);
        }

      } else if (data.type == 'loginout') { // 接收到退出登录的人员信息还有新的主持人信息

        this.hostReplace(data.userId, data.newHost, true);
        this.$message({
          type: 'info',
          message: data.userId + '退出了房间'
        });

      } else if (data.type == 'sendData') { // 接收主持人发送的房间数据
        console.log(data.data)
        this.allData = data.data; // 储存房间数据
        this.files = data.files; // 当前房间已共享的文件
        if (this.fileId != null) {
          drawDesign.drawAllData(this.ctxData, this.x, this.y, this.endx, this.endy, this.zoom, this.allData[this.fileId][this.imgIndex]); // 绘画所有数据
        }

      } else if (data.type == 'drawInfo') { // 实时接收的数据

        if (data.data.type == 'revoke') { // 接收到回撤命令
          this.allData[this.fileId][this.imgIndex].pop();
          this.ctxData.clearRect(0, 0, this.canvasWidth, this.canvasHeight); // 清空数据
          drawDesign.drawAllData(this.ctxData, this.x, this.y, this.endx, this.endy, this.zoom, this.allData[this.fileId][this.imgIndex]); // 绘画所有数据
        } else if (data.data.type == 'clear') { // 接收到清空命令
          this.allData[this.fileId][this.imgIndex] = [];
          this.ctxData.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
        } else if (data.data.type == 'move') { // 接收到移动命令
          this.x = data.data.movex + this.x1;
          this.y = data.data.movey + this.y1;
          this.ctxImg.clearRect(0, 0, this.canvasWidth, this.canvasHeight); // 清空背景图
          this.ctxData.clearRect(0, 0, this.canvasWidth, this.canvasHeight); // 清空数据
          drawDesign.drawAllData(this.ctxData, this.x, this.y, this.endx, this.endy, this.zoom, this.allData[this.fileId][this.imgIndex]); // 绘画所有数据
          this.ctxImg.drawImage(this.img, 0, 0, this.imgWidth, this.imgHeight, this.x, this.y, this.endx, this.endy); // 重新加载背景
          this.x1 = this.x;
          this.y1 = this.y;
        } else if (data.data.type == 'files') { // 接收到房间其他人员共享文件消息
          this.files = data.data.files
        } else if (data.data.type == 'selectFile') { // 接收到房主切换文件消息
          console.log(data.data.data.fileId, data.data.data.imgIndex, data.data.data.url)
          this.show_iframe = 'iframe_hide';
          this.src = data.data.data.url
          if (data.data.data.fileId != null) {
            this.fileId = data.data.data.fileId;
          }
          this.imgIndex = data.data.data.imgIndex;
          if (!this.allData[this.fileId]) {
            this.allData[this.fileId] = {};
          }
          if (!this.allData[this.fileId][this.imgIndex]) {
            this.allData[this.fileId][this.imgIndex] = [];
          }
          this.gxFile = data.data.data
          this.initLoading();

        } else if (data.data.type == 'Scroll') { // 滚动



          this.zoom = data.data.zoom;
          console.log(data.data, '//////')
          this.x = data.data.x;
          this.y = data.data.y;
          this.x1 = data.data.x;
          this.y1 = data.data.y;
          this.endx = data.data.endx;
          this.endy = data.data.endy;
          this.ctxImg.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
          this.ctxImg.drawImage(this.img, 0, 0, this.imgWidth, this.imgHeight, this.x, this.y, this.endx, this.endy);
          this.ctxData.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
          drawDesign.drawAllData(this.ctxData, this.x, this.y, this.endx, this.endy, this.zoom, this.allData[this.fileId][this.imgIndex]); // 绘画所有数据


        } else if (data.data.type == 'three') { // 接收到房主查看三维文件
          this.show_iframe = 'iframe_show';
        } else { // 接收到标记命令
          this.allData[this.fileId][this.imgIndex].push(data.data) // 存放数据
          drawDesign.drawAllData(this.ctxData, this.x, this.y, this.endx, this.endy, this.zoom, this.allData[this.fileId][this.imgIndex]); // 绘画所有数据
        }

      } else if (data.type == 'host') { // 收到申请主持人信息

        this.hostFlag = true; // 有人正在申请主持人状态，其他人员不可申请
        if (this.host == 1) { // 判断自己是主持人，不是主持人则不管
          this.$confirm(data.data.userNmae + '申请成为主持人，是否同意', '提示', {
            confirmButtonText: '同意',
            cancelButtonText: '拒绝',
            type: 'info'
          }).then(() => { // 同意申请主持人
            this.hostFlag = false;
            this.host = 0;
            this.hostReplace(null, data.data.userId, false);
            let obj = {
              type: 'replace',
              data: {
                new: {
                  userId: data.data.userId,
                  userName: data.data.userNmae,
                },
                old: {
                  userId: this.userId,
                  userName: this.userNmae,
                }
              }
            }
            this.websocketsend(obj)
            this.$message({
              type: 'success',
              message: '已同意!'
            });
          }).catch(() => {
            this.hostFlag = false;
            let obj = {
              type: 'refuse',
              data: {
                userId: data.data.userId,
                userName: data.data.userNmae,
              },
            }
            this.websocketsend(obj)
            this.$message({
              type: 'info',
              message: '已拒绝'
            });
          });
        }

      } else if (data.type == 'replace') { // 同意申请

        this.hostFlag = false;
        this.$message.success(data.data.new.userName + '已成为新的主持人');
        this.hostReplace(null, data.data.new.userId, false);

      } else if (data.type == 'refuse') { // 拒绝申请

        this.hostFlag = false;
        if (data.data.userId == this.userId) { // 判断是不是自己被拒绝
          this.$message.info('您的申请，已被拒绝');
        }

      }
    },
    websocketsend(Data) { // 数据发送
      this.webSocket.send(JSON.stringify(Data)); // 这个正常
    },
    websocketclose(e) { // 关闭
      console.log('断开连接', e);
    },
    hostReplace(oldHostId, newHostId, flag) { // 更换主持人操作函数 flag为true表示主持人退出更换，flag为flase表示会议人员申请更换
      if (flag) { // 有人退出房间，将该人从用户数组移除
        for (let i = 0; i < this.userList.length; i++) { // 从用户数组剔除退房人员
          if (this.userList[i].userId == oldHostId) {
            this.userList.splice(i, 1)
          }
        }
      } else { // 有人申请成功，替换主持人，先将所有人员都改为参会人员
        for (let i = 0; i < this.userList.length; i++) { // 从用户数组剔除退房人员
          this.userList[i].host = 0
        }
      }
      if (this.userId == newHostId) { // 判断自己是否为新的主持人
        this.host = 1;
      }
      for (let q = 0; q < this.userList.length; q++) { // 从用户数组更改新的主持人
        if (this.userList[q].userId == newHostId) {
          this.userList[q].host = 1;
        }
      }
      console.log(this.userList, '//////////', this.host)
    },
    initCanvas() {
      this.img = document.getElementById("img"); // 获取到第一层canvas元素
      this.data = document.getElementById("data"); // 获取到第二层canvas元素
      this.draw = document.getElementById("draw"); // 获取到第三层canvas元素

      this.ctxImg = this.img.getContext("2d"); // 获取到第一层canvas元素的上下文
      this.ctxData = this.data.getContext("2d"); // 获取到第二层canvas元素的上下文
      this.ctxDraw = this.draw.getContext("2d"); // 获取到第三层canvas元素的上下文

      this.canvasWidth = this.$refs.canvasBox.clientWidth;
      this.canvasHeight = this.$refs.canvasBox.clientHeight;  // 保存一份宽高到drawDesign

      this.img.width = this.canvasWidth;
      this.img.height = this.canvasHeight;
      this.data.width = this.canvasWidth;
      this.data.height = this.canvasHeight;
      this.draw.width = this.canvasWidth;
      this.draw.height = this.canvasHeight; // 设置三个canvas的统一宽高
      document.oncontextmenu = function (e) { return false; } // 禁止整个浏览器的右键默认事件
      this.draw.addEventListener("mousewheel", this.handleScroll); // chrome and ie
      this.draw.addEventListener("DOMMouseScroll", this.handleScroll); // firefox   给canvas添加鼠标滚轮事件

    },
    // canvas加载图片
    initLoading() {
      this.img = new Image();
      this.img.onload = () => { // 图片加载完毕后执行以下方法
        this.imgWidth = this.img.naturalWidth; // 获取图片的原始高宽
        this.imgHeight = this.img.naturalHeight;
        let initImg = drawDesign.initLoadImg(this.canvasWidth, this.canvasHeight, this.imgWidth, this.imgHeight); // 返回图片应该加载的初始位置和结束位置
        this.x = initImg.x;
        this.y = initImg.y;
        this.x1 = initImg.x;
        this.y1 = initImg.y;
        this.endx = initImg.endx;
        this.endy = initImg.endy;
        this.endx1 = initImg.endx;
        this.endy1 = initImg.endy;
        this.ctxImg.clearRect(0, 0, this.canvasWidth, this.canvasHeight); // 加载背景图之前先清空背景图canvas
        this.ctxImg.drawImage(this.img, 0, 0, this.imgWidth, this.imgHeight, this.x, this.y, this.endx, this.endy); // 加载背景图
        this.ctxData.clearRect(0, 0, this.canvasWidth, this.canvasHeight); // 加载数据之前清空第二层数据canvas
        drawDesign.drawAllData(this.ctxData, this.x, this.y, this.endx, this.endy, this.zoom, this.allData[this.fileId][this.imgIndex]); // 绘画所有数据
      }
      this.img.src = this.src; // src = 原图路径
    },
    // canvas加载图片
    initLoading1() {
      this.img = new Image();
      this.img.src = this.src; // src = 原图路径
      this.imgWidth = this.img.naturalWidth; // 获取图片的原始高宽
      this.imgHeight = this.img.naturalHeight;
      let initImg = drawDesign.initLoadImg(this.canvasWidth, this.canvasHeight, this.imgWidth, this.imgHeight); // 返回图片应该加载的初始位置和结束位置
      this.x = initImg.x;
      this.y = initImg.y;
      this.x1 = initImg.x
      this.y1 = initImg.y
      this.endx = initImg.endx
      this.endy = initImg.endy
      this.endx1 = initImg.endx
      this.endy1 = initImg.endy
      this.ctxImg.clearRect(0, 0, this.canvasWidth, this.canvasHeight); // 加载背景图之前先清空背景图canvas
      this.ctxImg.drawImage(this.img, 0, 0, this.imgWidth, this.imgHeight, this.x, this.y, this.endx, this.endy); // 加载背景图
    },
    drawFont() { // 文字框失去焦点绘画文字
      if (this.fontText != null) { // 文字不为空触发以下事件
        let obj = { // 创建文字数据对象
          type: 'drawInfo',
          data: {
            type: "font",
            fileId: this.fileId,
            imgIndex: this.imgIndex,
            data: {
              x: ((this.fontx - this.x) / this.endx).toFixed(3),
              y: ((this.fonty - this.y) / this.endy).toFixed(3),
              text: this.fontText
            },
            attr: {
              size: '15',
              zoom: this.zoom,
              color: this.color
            }
          }
        };
        drawDesign.drawFont(this.ctxData, this.fontx, this.fonty, this.fontText, '15px 宋体', this.color);
        if (this.webSocket !== null) {
          console.log("....", this.webSocket, obj)
          this.websocketsend(obj);
        }
        this.allData[this.fileId][this.imgIndex].push(obj.data) // 存放数据
        // this.socketEmit('draw-info', obj)
        this.iptShow = false;
        this.fontText = null;
      } else {
        this.iptShow = false;
      }
    },
    down(e) {
      console.log("///")
      if (e.button == 2) { // 点下的右键
        this.LEFT = false
      } else if (e.button == 0) { // 点下的左键
        this.LEFT = true;
        this.arrX = [];
        this.arrY = []; // 初始化点线数组
        if (!this.iptShow || this.fontText == null) {
          this.fontx = e.offsetX;
          this.fonty = e.offsetY;
        }
        if (this.tool == '文字' && this.host == 1) { // 绘画文字
          this.iptShow = true;
          this.iptLeft = this.fontx
          this.iptTop = this.fonty
          setTimeout(() => {
            this.$refs.input.focus();
          }, 500);
        }
      }
      this.downx = e.offsetX;
      this.downy = e.offsetY; // 保存鼠标点下的位置
      console.log(this.fileId, this.host)
      if (this.fileId != null && this.host == 1) {
        console.log(this.host)
        this.flag = true; // 确认鼠标点下，可以触发移动
      }
    },
    up(e) {
      if (this.flag) {
        this.flag = false; // 确认抬起点下，不能触发移动
        this.x1 = this.x;
        this.y1 = this.y;
        this.movex = e.offsetX - this.downx;
        this.movey = e.offsetY - this.downy;
        let obj = {};
        if (this.LEFT) {
          switch (this.tool) {
            case '涂鸦':
              obj = {
                type: "drawInfo",
                data: { // 鼠标抬起的时候存放点线的绘画数据
                  type: "point",
                  fileId: this.fileId,
                  imgIndex: this.imgIndex,
                  data: { x: this.arrX, y: this.arrY },
                  attr: { size: this.lineWidth, color: this.color, zoom: this.zoom },
                }
              }
              if (this.webSocket !== null) {
                this.websocketsend(obj);
              }
              this.allData[this.fileId][this.imgIndex].push(obj.data) // 存放数据
              break;
            case '矩形选框':
              this.ctxDraw.clearRect(0, 0, this.canvasWidth, this.canvasHeight); // 清空第一层绘板
              drawDesign.drawRect(this.ctxData, this.downx, this.downy, this.movex, this.movey, this.lineWidth, this.color); // 将数据绘画到中间层数据绘板
              obj = {
                type: "drawInfo",
                data: {
                  type: "rect",
                  fileId: this.fileId,
                  imgIndex: this.imgIndex,
                  data: { x: ((this.downx - this.x) / this.endx).toFixed(3), y: ((this.downy - this.y) / this.endy).toFixed(3) },
                  enddata: { x: ((e.offsetX - this.x) / this.endx).toFixed(3), y: ((e.offsetY - this.y) / this.endy).toFixed(3) },
                  attr: { size: this.lineWidth, color: this.color, zoom: this.zoom },
                },
              };
              if (this.webSocket !== null) {
                this.websocketsend(obj);
              }
              this.allData[this.fileId][this.imgIndex].push(obj.data) // 存放数据
              break;
            case '线段':
              this.ctxDraw.clearRect(0, 0, this.canvasWidth, this.canvasHeight); // 清空第一层绘板
              drawDesign.drawPoint(this.ctxData, this.downx, this.downy, e.offsetX, e.offsetY, this.lineWidth, this.color); // 将数据绘画到中间层数据绘板
              obj = {
                type: "drawInfo",
                data: {
                  type: "line",
                  fileId: this.fileId,
                  imgIndex: this.imgIndex,
                  data: { x: ((this.downx - this.x) / this.endx).toFixed(3), y: ((this.downy - this.y) / this.endy).toFixed(3) },
                  enddata: { x: ((e.offsetX - this.x) / this.endx).toFixed(3), y: ((e.offsetY - this.y) / this.endy).toFixed(3) },
                  attr: { size: this.lineWidth, color: this.color, zoom: this.zoom },
                }
              };
              if (this.webSocket !== null) {
                this.websocketsend(obj);
              }
              this.allData[this.fileId][this.imgIndex].push(obj.data) // 存放数据
              break;
            case '圆形选框':
              let x = this.movex / 2 + this.downx;
              let y = this.movey / 2 + this.downy;
              let endx = this.movex / 2;
              let endy = this.movey / 2;
              this.ctxDraw.clearRect(0, 0, this.canvasWidth, this.canvasHeight); // 清空第一层绘板
              drawDesign.EvenCompEllipse(this.ctxData, x, y, endx, endy, this.lineWidth, this.color); // 将数据绘画到中间层数据绘板
              obj = {
                type: "drawInfo",
                data: {
                  type: "circular",
                  fileId: this.fileId,
                  imgIndex: this.imgIndex,
                  data: { x: ((x - this.x) / this.endx).toFixed(3), y: ((y - this.y) / this.endy).toFixed(3) },
                  enddata: { x: ((e.offsetX - this.x) / this.endx).toFixed(3), y: ((e.offsetY - this.y) / this.endy).toFixed(3) },
                  attr: { size: this.lineWidth, color: this.color, zoom: this.zoom },
                }
              };
              if (this.webSocket !== null) {
                this.websocketsend(obj);
              }
              this.allData[this.fileId][this.imgIndex].push(obj.data) // 存放数据
              break;
            case '箭头':
              this.ctxDraw.clearRect(0, 0, this.canvasWidth, this.canvasHeight); // 清空第一层绘板
              drawDesign.Plot.arrowCoord({ x: this.downx, y: this.downy }, { x: e.offsetX, y: e.offsetY });
              drawDesign.Plot.sideCoord();
              drawDesign.Plot.drawArrow(this.ctxData, this.color); // 将数据绘画到中间层数据绘板
              obj = {
                type: "drawInfo",
                data: {
                  type: "arrow",
                  fileId: this.fileId,
                  imgIndex: this.imgIndex,
                  data: { x: ((this.downx - this.x) / this.endx).toFixed(3), y: ((this.downy - this.y) / this.endy).toFixed(3) },
                  enddata: { x: ((e.offsetX - this.x) / this.endx).toFixed(3), y: ((e.offsetY - this.y) / this.endy).toFixed(3) },
                  attr: { size: this.lineWidth, color: this.color, zoom: this.zoom },
                }
              };
              if (this.webSocket !== null) {
                this.websocketsend(obj);
              }
              this.allData[this.fileId][this.imgIndex].push(obj.data) // 存放数据
              break;
            default:
              console.log('其他')
          }
        } else { // 抬起的右键

          obj = {
            type: "drawInfo",
            data: {
              type: "move",
              movex: this.movex,
              movey: this.movey,
            }
          };
          if (this.webSocket !== null) {
            this.websocketsend(obj);
          }


        }
      }
    },
    move(e) {
      if (this.flag) { // 判断是否点下了
        this.movex = e.offsetX - this.downx;
        this.movey = e.offsetY - this.downy;
        if (!this.LEFT) { // 点下的是右键
          this.x = this.movex + this.x1;
          this.y = this.movey + this.y1;
          this.ctxImg.clearRect(0, 0, this.canvasWidth, this.canvasHeight); // 清空背景图
          this.ctxData.clearRect(0, 0, this.canvasWidth, this.canvasHeight); // 清空数据
          drawDesign.drawAllData(this.ctxData, this.x, this.y, this.endx, this.endy, this.zoom, this.allData[this.fileId][this.imgIndex]); // 绘画所有数据
          this.ctxImg.drawImage(this.img, 0, 0, this.imgWidth, this.imgHeight, this.x, this.y, this.endx, this.endy); // 重新加载背景
        } else { // 点下的是左键
          switch (this.tool) {
            case '涂鸦':
              drawDesign.drawPoint(this.ctxData, this.downx, this.downy, e.offsetX, e.offsetY, this.lineWidth, this.color)
              this.arrX.push(((e.offsetX - this.x) / this.endx));
              this.arrY.push(((e.offsetY - this.y) / this.endy));
              this.downy = e.offsetY;
              this.downx = e.offsetX;
              break;
            case '矩形选框':
              this.ctxDraw.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
              drawDesign.drawRect(this.ctxDraw, this.downx, this.downy, this.movex, this.movey, this.lineWidth, this.color);
              break;
            case '圆形选框':
              this.ctxDraw.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
              drawDesign.EvenCompEllipse(this.ctxDraw, this.movex / 2 + this.downx, this.movey / 2 + this.downy, this.movex / 2, this.movey / 2, this.lineWidth, this.color);
              break;
            case '箭头':
              this.ctxDraw.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
              drawDesign.Plot.arrowCoord({ x: this.downx, y: this.downy }, { x: e.offsetX, y: e.offsetY });
              drawDesign.Plot.sideCoord();
              drawDesign.Plot.drawArrow(this.ctxDraw, this.color);
              break;
            case '线段':
              this.ctxDraw.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
              drawDesign.drawPoint(this.ctxDraw, this.downx, this.downy, e.offsetX, e.offsetY, this.lineWidth, this.color)
              break;
            default:
              console.log('其他')
          }

        }
      } else {
        if (e.offsetX > this.x && e.offsetX < this.endx + this.x && e.offsetY > this.y && e.offsetY < this.endy + this.y) {
          this.Roller = true; // 判断鼠标移动在图片上才能进行缩放操作
        } else {
          this.Roller = false;
        }
      }
    },
    handleScroll(e) {
      // console.log(e.deltaY,drawDesign.Roller)
      if (this.host == '1') {
        var delta = e.wheelDelta || -e.detail;
        if (this.Roller && !this.flag) {
          this.Rollerx = e.offsetX - this.x;
          this.Rollery = e.offsetY - this.y;
          if (delta > 0) {
            // 向上滚动 放大
            if (this.endx1 * this.zoom < this.imgWidth * 10) {
              this.zoom += 0.2;
              this.zoom = parseFloat(this.zoom.toFixed(2));
            }
            console.log(this.zoom)
            this.x = this.x - (this.endx1 * this.zoom - this.endx) * (this.Rollerx / this.endx);
            this.y = this.y - (this.endy1 * this.zoom - this.endy) * (this.Rollery / this.endy);
            this.endx = this.endx1 * this.zoom;
            this.endy = this.endy1 * this.zoom;
            this.ctxImg.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
            this.ctxImg.drawImage(this.img, 0, 0, this.imgWidth, this.imgHeight, this.x, this.y, this.endx, this.endy);
            this.x1 = this.x;
            this.y1 = this.y;
            this.ctxData.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
            drawDesign.drawAllData(this.ctxData, this.x, this.y, this.endx, this.endy, this.zoom, this.allData[this.fileId][this.imgIndex]); // 绘画所有数据
            let obj = {
              type: "drawInfo",
              data: {
                type: "Scroll",
                zoom: this.zoom,
                x: this.x,
                y: this.y,
                endx: this.endx,
                endy: this.endy,
              }
            };
            console.log(obj, '////////////')
            if (this.webSocket !== null) {
              this.websocketsend(obj);
            }
          } else {
            // 向下滚动 缩小
            this.zoom -= 0.2;
            this.zoom = parseFloat(this.zoom.toFixed(2));
            if (this.zoom < 0.1) {
              this.zoom = 0.1;
            }
            this.x = this.x - (this.endx1 * this.zoom - this.endx) * (this.Rollerx / this.endx);
            this.y = this.y - (this.endy1 * this.zoom - this.endy) * (this.Rollery / this.endy);
            this.endx = this.endx1 * this.zoom;
            this.endy = this.endy1 * this.zoom;
            this.ctxImg.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
            this.ctxImg.drawImage(this.img, 0, 0, this.imgWidth, this.imgHeight, this.x, this.y, this.endx, this.endy);
            this.x1 = this.x;
            this.y1 = this.y;
            this.ctxData.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
            drawDesign.drawAllData(this.ctxData, this.x, this.y, this.endx, this.endy, this.zoom, this.allData[this.fileId][this.imgIndex]); // 绘画所有数据
            let obj = {
              type: "drawInfo",
              data: {
                type: "Scroll",
                zoom: this.zoom,
                x: this.x,
                y: this.y,
                endx: this.endx,
                endy: this.endy,
              }
            };
            console.log(obj, '////////////')
            if (this.webSocket !== null) {
              this.websocketsend(obj);
            }
          }
        }
      }
    },
    thisColor(val) {
      this.color = val;
      console.log('当前选择的颜色：', val)
    },
    thisToolbar(data) {
      console.log(data)
      if (data.title == '撤销') {
        if (this.host == '1') { // 主持人才能进行该操作

          this.allData[this.fileId][this.imgIndex].pop();
          this.ctxData.clearRect(0, 0, this.canvasWidth, this.canvasHeight); // 清空数据
          drawDesign.drawAllData(this.ctxData, this.x, this.y, this.endx, this.endy, this.zoom, this.allData[this.fileId][this.imgIndex]); // 绘画所有数据
          let obj = {
            type: "drawInfo",
            data: { // 鼠标抬起的时候存放点线的绘画数据
              type: "revoke",
            }
          }
          if (this.webSocket !== null) {
            this.websocketsend(obj);
          }

        }
      } else if (data.title == '清空') {
        if (this.host == '1') { // 主持人才能进行该操作

          this.allData[this.fileId][this.imgIndex] = [];
          this.ctxData.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
          let obj = {
            type: "drawInfo",
            data: { // 鼠标抬起的时候存放点线的绘画数据
              type: "clear",
            }
          }
          if (this.webSocket !== null) {
            this.websocketsend(obj);
          }

        }
      } else {
        this.tool = data.title;
      }
    }
  },
  watch: {
    '$route': 'getParams'
  },
}
</script>
<style>
#test {
  height: 100%;
}
canvas {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  /* z-index: -3 !important; */
}
.img {
  z-index: 3;
  background-color: white;
  /* background-image: url('../../static/img/timg.jpg') */
}
.data {
  z-index: 6;
}
.draw {
  z-index: 9;
}
.el-color-picker__icon {
  display: none !important;
}
.ipt {
  position: absolute;
  background: none;
  height: 30px;
  z-index: 19;
  top: 50%;
  left: 50%;
  outline: 0;
  word-wrap: break-word;
  border: 1px dashed #8d270e;
  height: 15px;
  color: #8d270e;
}
.test_div {
  position: fixed;
  top: 0;
  left: 200px;
  z-index: 99;
}
#iframe_hide {
  position: absolute;
  z-index: -1;
  width: 80%;
  height: 90%;
  left: 200px;
  top: 0;
}
#iframe_show {
  position: absolute;
  z-index: 10;
  width: 80%;
  height: 90%;
  left: 200px;
  top: 0;
}
</style>
